@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import 'tailwindcss';

@theme {
  --color-primary: #030014;
  --color-dark-100: #0f0d23; /* amazing! can interact with tailwindcss */
  --breakpoint-xs: 480px;
  --background-image-hero-pattern: url('/hero-bg.png');
}

@layer base {
  body {
    font-family: 'DM Sans', serif;
    font-optical-sizing: auto;
    @apply bg-primary
text-white;
  }

  main {
    @apply min-h-screen relative;
  }

  .pattern {
    @apply bg-hero-pattern w-screen h-screen bg-center bg-cover absolute z-0;
  }

  .wrapper {
    @apply px-5 py-12 xs:p-10 max-w-7xl mx-auto relative z-10;
  }

  header {
    img {
      @apply mx-auto;
    }
    h1 {
      @apply mx-auto max-w-4xl text-center text-5xl font-bold leading-tight tracking-[-1%] text-white sm:text-[64px] sm:leading-[76px];
    }
  }

  .all-movies {
    @apply space-y-9;

    & ul {
      /* TODO: learn the effect of codes below */
      @apply grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
    }
  }

  .movie-card {
    @apply bg-dark-100 p-5 rounded-2xl shadow-inner;

    div > h3 {
      @apply font-bold;
    }

    .content {
      @apply flex mt-2 gap-2;

      .rating {
        @apply flex font-bold;
      }

      > :not(:first-child) {
        @apply text-gray-300 font-medium;
      }
    }
  }
}

@utility text-gradient {
  @apply bg-linear-to-r from-[#D6C7FF] to-[#AB8BFF] bg-clip-text text-transparent;
}
